<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css画形状</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.circle{
				border: solid 2px red;
				border-radius: 50px;
			}
			.triangle{
				width: 0;
				height: 0;
				border: solid 10px transparent;
				border-right-color: red;
			}
			.triangle2{
				width: 0;
				height: 0;
				border-bottom: 80px solid transparent;
			    border-left: 40px solid green;
			    border-right: 40px solid transparent;
			}
			.dialog{
				position: relative;
				background-color: pink;
			}
			.dialog-icon{
				position: absolute;
				top: -20px;
				left: 70px;
				width: 0;
				height: 0;
				border: solid 10px transparent;
				border-bottom-color: pink;
			}
			.tixing{
				border-bottom: 100px solid green;
			    border-left: 50px solid transparent;
			    border-right: 50px solid transparent;
			    height: 0;
			    width: 100px;
			}
		</style>
	</head>
	<body>
		<h4>圆形：</h4>
		<div class="circle"></div>
		<h4>三角：</h4>
		<div class="triangle"></div>
		<hr>
		<div class="triangle2"></div>
		<h4>对话框：</h4>
		<div class="dialog">
			<div class="dialog-icon"></div>
		</div>
		<h4>梯形：</h4>
		<div class="tixing"></div>
	</body>
</html>
